import React, { 
    useState, 
    useEffect,
    useCallback,
    useMemo,
    useRef,
    useContext,
 }  from "react"
import { useTitle, useTheme } from "../../hooks"
//无状态组件（函数式组件）
//特点：没有this，没有上下文，没有生命周期，没有Ref。
//相对类组件，性能更好，速度更快
//Hooks 从16.8才有的
//useState 用于定义响应式数据
//useEffect 使用副作用：定时器、调接口、DOM操作、Ref操作.好处是可以实现业务逻辑的分离
//useMemo 作用是用于缓存那些需要计算的变量，类似于vue中计算属性的缓存功能(返回一个可缓存的变量)
//useCallback 用于绑定在函数上,这个函数在依赖变量没有变化时不会重新编译(返回一个可缓存的方法)
//useContext 让我们在函数式组件中使用上下文。
//useRef 让我们使用ref的属性
function TestHooks(props){
    //定义一个响应式变量
    //count是响应式变量,当响应式变量被set*修改时，会触发当前函数式组件重新运算返回新的JSX对象，进一步执行diff运算
    //setCount专门用来修改count这个响应式变量
    //setCount也要像使用类组件中的this.setState()一样，一样要考虑新值和旧值是否有关
    let [count,setCount]=useState(0)
    let [num,setNum]=useState(100)
    //h1Ref是给jsx的ref属性使用的
    //h1Ref.current指向的是DOM实例
    const h1Ref = useRef(null)
    //使用上下文
    const theme = useTheme()

    /*
        useEffect标准语法
        useEffect(()=>{return()=>{}})
        特点1:useEffect是专门用于处理副总用的。
        特点2:useEffect，原则上一个useEffect只做一件事
        特点3:在同一个函数式组件中可以同时使用多个useEffect
    */


    useTitle('他好')
//    useEffect(()=>{
//        console.log('------');
//        //开启定时器
//        var timer=setInterval(()=>{
//            setCount(count+1)
//            console.log('count',count)
//            console.log('+++++++++');
//        },1000)
//        return()=>{
//            //关闭定时器
//            clearInterval(timer)
//        }
//    },[count])
//有且仅有num变化时，这个计算都会执行运算
    let isFlag=useMemo(()=>(num%2===0),[num])
    //这两个事件处理器，只被当前环境编译一次
    const add = useCallback(() => setNum(num + 1))
    const sub = useCallback(() =>setNum(num - 1))

    const changeColor=()=>{
        //使用Ref来修改h1的颜色
        h1Ref.current.style.color='red'
    }
    return(
        <div
            // style={{
            //     background:theme.background,
            //     color:theme.color
            // }}
        >
            <h1>使用Hooks API</h1>
            <hr />
            <h1>{count}</h1>
            <hr />
            <h1>{num}</h1>
            <button onClick={add}>+</button>
            <button onClick={sub}>-</button>
            <span>当前num是{isFlag?'偶数':'奇数'}</span>
            <hr />
            <h1 ref={h1Ref}>这是一行文字</h1>
            <button onClick={changeColor}>使用ref修改颜色</button>
        </div>
    )
}
export default TestHooks